<template>
  <div class="room-card" :class="dynamicCardClass" @click="goToRoomDetails" tabindex="0">
    <div class="card-content-wrapper">
      <div class="card-header">
        <div class="header-main-info">
          <span class="icon room-icon">🏢</span> <h3 class="room-name" :title="room.roomname">{{ room.roomname }}</h3>
        </div>
        <span :class="statusClass" class="status-badge header-status-badge">{{ displayStatus }}</span>
      </div>

      <div class="card-body">
        <div class="info-grid">
          <div class="info-item" title="容纳人数">
            <span class="icon info-icon">👥</span><span class="value">{{ room.capacity }}人</span>
          </div>
          <div class="info-item" title="价格">
            <span class="icon info-icon">🏷️</span><span class="value">{{ room.price }}元/时</span> </div>
          <div class="info-item" title="面积">
            <span class="icon info-icon">📏</span><span class="value">{{ room.area }}m²</span> </div>
        </div>

        <div class="equipment-status-pills">
          <span class="equip-pill" :class="getDevicePillClass(room.projector)" title="投影仪">
            <span class="equip-icon">💡</span>
            <span class="equip-name">投影仪</span>
            <span class="status-mark">{{ room.projector === 1 ? '✓' : '✗' }}</span>
          </span>
          <span class="equip-pill" :class="getDevicePillClass(room.sound)" title="音响">
            <span class="equip-icon">🔊</span>
            <span class="equip-name">音响</span>
            <span class="status-mark">{{ room.sound === 1 ? '✓' : '✗' }}</span>
          </span>
          <span class="equip-pill" :class="getDevicePillClass(room.internet)" title="网络">
            <span class="equip-icon">🌐</span>
            <span class="equip-name">网络</span>
            <span class="status-mark">{{ room.internet === 1 ? '✓' : '✗' }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  room: {
    type: Object,
    required: true
  }
});

const router = useRouter();

const statusMap = {
  0: '待支付', // Simplified
  1: '已预订', // Simplified
  5: '使用中',
  6: '空闲',
  7: '维修中' 
};

const displayStatus = computed(() => {
  return statusMap[props.room.paymentStatus] || '未知'; // Simplified unknown
});

const statusClass = computed(() => {
  switch (props.room.paymentStatus) {
    case 0: return 'status-badge-pending-payment';
    case 1: return 'status-badge-paid-unused'; // "已预订" could use a distinct color, e.g. paid
    case 5: return 'status-badge-in-use';
    case 6: return 'status-badge-available';
    case 7: return 'status-badge-maintenance';
    default: return 'status-badge-unknown';
  }
});

const dynamicCardClass = computed(() => {
  switch (props.room.paymentStatus) {
    case 6: return 'card-theme-available'; 
    case 5: return 'card-theme-in-use';    
    case 0: return 'card-theme-pending';   
    case 7: return 'card-theme-maintenance'; 
    case 1: return 'card-theme-paid';      
    default: return 'card-theme-default';
  }
});

const getDevicePillClass = (status) => {
  return status === 1 ? 'device-pill-ok' : 'device-pill-bad';
};

const goToRoomDetails = () => {
  router.push({ name: 'SingleRoomTimeline', params: { roomId: props.room.roomId } });
};
</script>

<style scoped>
/* CSS Variables for Theming and Consistency */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Using Inter as a more "pro" choice, with fallbacks */
  
  --card-bg: #ffffff;
  --card-border-radius: 8px; /* Slightly softer radius */
  --card-shadow: 0 2px 8px rgba(0,0,0,0.08); /* More pronounced, but still soft shadow */
  --card-hover-shadow: 0 6px 12px rgba(0,0,0,0.12); /* Stronger hover shadow */
  --card-left-border-width: 5px; /* Slightly thicker border */
  --card-subtle-border-color: #e0e0e0; /* Lighter, neutral gray for border */

  --text-primary: #2c3e50;   /* Darker, more standard primary text */
  --text-secondary: #5c6f8d; /* Slightly lighter secondary text */
  --text-muted: #95a5a6;    /* Softer muted text */
  --text-on-status-badge: #ffffff; 

  --icon-color-default: var(--text-muted);
  --icon-color-header: #34495e; /* Darker header room icon */

  /* Status Colors */
  --status-color-available: #2ecc71; /* Vibrant Green */
  --status-color-in-use: #e74c3c;    /* Vibrant Red */
  --status-color-pending: #f39c12;   /* Vibrant Orange */
  --status-color-paid: #3498db;      /* Vibrant Blue */
  --status-color-maintenance: #95a5a6; /* Muted Gray */
  --status-color-unknown: #bdc3c7;    /* Lighter unknown status */
  --status-text-on-pending: #ffffff; 

  /* Device Status Pill Colors */
  --device-pill-ok-bg: #e6ffe6;         /* Lighter green */
  --device-pill-ok-text: #27ae60;       /* Darker green */
  --device-pill-bad-bg: #ffe6e6;       /* Lighter red */
  --device-pill-bad-text: #c0392b;       /* Darker red */
}

.room-card {
  font-family: var(--font-main);
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  margin-bottom: 20px; /* Increased margin for better separation */
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Slower transition for smoother effect */
  box-shadow: var(--card-shadow);
  
  border: 1px solid var(--card-subtle-border-color);
  border-left-width: var(--card-left-border-width);
  
  display: flex;
  flex-direction: column;
  min-width: 280px; /* Slightly wider min-width */
  max-width: 360px; /* Slightly wider max-width */
}

/* Dynamic Card Theming for left border color */
.card-theme-available { border-left-color: var(--status-color-available); }
.card-theme-in-use { border-left-color: var(--status-color-in-use); }
.card-theme-pending { border-left-color: var(--status-color-pending); }
.card-theme-maintenance { border-left-color: var(--status-color-maintenance); }
.card-theme-paid { border-left-color: var(--status-color-paid); }
.card-theme-default { border-left-color: var(--status-color-unknown); }

.room-card:hover {
  transform: translateY(-5px); /* More pronounced lift */
  box-shadow: var(--card-hover-shadow);
}
.room-card:focus-visible {
  outline: 3px solid var(--status-color-paid); /* Thicker outline */
  outline-offset: 2px; /* More offset */
}

.card-content-wrapper {
  padding: 16px 20px; /* Increased padding */
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px; /* Increased margin */
}

.header-main-info {
  display: flex;
  align-items: center;
  gap: 12px; /* Increased gap */
  flex-grow: 1; 
  min-width: 0; 
}

.icon.room-icon {
  font-size: 1.8rem; /* Larger header icon */
  color: var(--icon-color-header);
  flex-shrink: 0;
}

.room-name {
  margin: 0;
  font-size: 1.3rem; /* Larger room name */
  font-weight: 700;  /* Bolder for clarity */
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.status-badge { 
  padding: 6px 12px; /* Larger padding */
  border-radius: 6px; /* Softer radius for badge */
  font-weight: 700; /* Bolder */
  font-size: 0.8rem; /* Slightly larger font */
  text-align: center;
  color: var(--text-on-status-badge);
  line-height: 1.3; /* Adjusted line height */
  flex-shrink: 0; 
  min-width: 70px; /* Wider min-width */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for badge */
}

/* Status Badge Colors - applied via statusClass for background */
.status-badge-pending-payment { background-color: var(--status-color-pending); color: var(--status-text-on-pending); }
.status-badge-paid-unused { background-color: var(--status-color-paid); }
.status-badge-in-use { background-color: var(--status-color-in-use); }
.status-badge-available { background-color: var(--status-color-available); }
.status-badge-maintenance { background-color: var(--status-color-maintenance); }
.status-badge-unknown { background-color: var(--status-color-unknown); }


.card-body {
  flex-grow: 1; 
  padding-top: 0; 
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px; /* Increased gap */
  margin-bottom: 16px; /* Increased margin */
  font-size: 0.85rem; /* Slightly larger font */
  color: var(--text-secondary);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px; /* Increased gap */
  background-color: #f8f9fa; /* Lighter background for info items */
  padding: 8px 10px; /* Increased padding */
  border-radius: 6px; /* Consistent with badge radius */
  border: 1px solid #e9ecef; /* Slightly darker border for info items */
  overflow: hidden; 
}
.info-item .icon.info-icon { 
  font-size: 1rem; /* Larger info icons */
  color: var(--text-muted);
  flex-shrink: 0;
}
.info-item .value {
  font-weight: 600; /* Bolder value text */
  color: var(--text-primary); 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipment-status-pills {
  display: flex;
  flex-wrap: wrap; 
  gap: 8px; /* Increased gap */
  margin-top: 12px;
}

.equip-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem; /* Slightly larger */
  padding: 5px 10px; /* Increased padding */
  border-radius: 6px; /* Consistent radius */
  font-weight: 600; /* Bolder */
  min-width: 100px; /* Wider min-width */
  border: 1px solid transparent; 
}

.equip-icon {
  font-size: 1em; 
  margin-right: 5px; /* Increased margin */
}
.equip-name { 
  white-space: nowrap;
}

.status-mark {
  margin-left: auto; 
  padding-left: 8px; /* Increased padding */
  font-weight: 800; /* Even bolder mark */
  font-size: 1.1em; /* Larger relative to pill text */
}

.device-pill-ok {
  background-color: var(--device-pill-ok-bg);
  color: var(--device-pill-ok-text);
  border-color: var(--device-pill-ok-text); 
}
.device-pill-bad {
  background-color: var(--device-pill-bad-bg);
  color: var(--device-pill-bad-text);
  border-color: var(--device-pill-bad-text); 
}

.status-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  color: #fff;
  line-height: 1.3;
  flex-shrink: 0;
  min-width: 70px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 具体状态样式 */
.status-badge-available {
  background-color: #2ecc71; /* 绿色 */
}

.status-badge-in-use {
  background-color: #e74c3c; /* 红色 */
}

.status-badge-pending-payment {
  background-color: #f39c12; /* 橙色 */
  color: #fff;
}

.status-badge-paid-unused {
  background-color: #3498db; /* 蓝色 */
}

.status-badge-maintenance {
  background-color: #95a5a6; /* 灰色 */
}

.status-badge-unknown {
  background-color: #bdc3c7; /* 淡灰色 */
}
</style>
